<template>
  <div class="data-visualization">
    <h4>数据可视化示例</h4>
    
    <!-- 图表交互控制 -->
    <div class="chart-controls">
      <button @click="$emit('refresh-data')" class="control-btn">
        刷新图表数据
      </button>
      <button @click="toggleLabels" class="control-btn">
        {{ showLabels ? '隐藏' : '显示' }}标签
      </button>
      
      <!-- 图表类型切换 -->
      <div class="chart-type-switcher">
        <label>图表类型:</label>
        <select v-model="localChartType" @change="switchChartType">
          <option value="bar">柱状图</option>
          <option value="line">折线图</option>
          <option value="area">面积图</option>
          <option value="pie">饼图</option>
          <option value="heatmap">热力图</option>
        </select>
      </div>
      
      <!-- 图表颜色设置 -->
      <div class="chart-colors">
        <label>图表颜色:</label>
        <select v-model="localColorScheme" @change="applyColorScheme">
          <option value="default">默认</option>
          <option value="pastel">柔和色系</option>
          <option value="vibrant">鲜艳色系</option>
          <option value="monochrome">单色渐变</option>
          <option value="custom">自定义...</option>
        </select>
        <input 
          v-if="localColorScheme === 'custom'" 
          type="color" 
          v-model="localCustomColor" 
          @change="applyColorScheme" 
          class="color-picker"
        >
      </div>
      
      <!-- 动画控制 -->
      <button @click="toggleAnimation" class="control-btn">
        {{ animationEnabled ? '关闭' : '开启' }}动画
      </button>
      
      <!-- 定时刷新控制 -->
      <div class="auto-refresh">
        <label>
          <input type="checkbox" v-model="autoRefreshEnabled">
          自动刷新
        </label>
        <select v-model="autoRefreshInterval" @change="setupAutoRefresh" v-if="autoRefreshEnabled">
          <option :value="5000">5秒</option>
          <option :value="10000">10秒</option>
          <option :value="30000">30秒</option>
          <option :value="60000">1分钟</option>
        </select>
      </div>
    </div>
  
    <div class="simple-chart-container" :class="`chart-${localChartType}`">
      <!-- 简单图表内容 -->
      <div class="chart-content">
        <slot :chartType="localChartType" :chartData="chartData"></slot>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, onMounted, onUnmounted } from 'vue'

// Props定义
const props = defineProps({
  chartType: {
    type: String,
    default: 'bar'
  },
  chartData: {
    type: Array,
    default: () => []
  },
  colorScheme: {
    type: String,
    default: 'default'
  },
  customColor: {
    type: String,
    default: '#4CAF50'
  }
})

// Emits定义
const emit = defineEmits([
  'update:chartType', 
  'update:colorScheme', 
  'update:customColor',
  'chart-type-change',
  'color-scheme-change',
  'refresh-data'
])

// 响应式状态
const localChartType = ref(props.chartType)
const localColorScheme = ref(props.colorScheme)
const localCustomColor = ref(props.customColor)
const showLabels = ref(true)
const animationEnabled = ref(true)
const autoRefreshEnabled = ref(false)
const autoRefreshInterval = ref(5000)

// 自动刷新计时器
let refreshTimer = null

// 监听props变化，同步到本地状态
watch(() => props.chartType, (newValue) => {
  localChartType.value = newValue
})

watch(() => props.colorScheme, (newValue) => {
  localColorScheme.value = newValue
})

watch(() => props.customColor, (newValue) => {
  localCustomColor.value = newValue
})

// 切换图表类型
const switchChartType = () => {
  emit('update:chartType', localChartType.value)
  emit('chart-type-change', localChartType.value)
}

// 应用颜色方案
const applyColorScheme = () => {
  emit('update:colorScheme', localColorScheme.value)
  emit('update:customColor', localCustomColor.value)
  emit('color-scheme-change', {
    scheme: localColorScheme.value,
    color: localCustomColor.value
  })
}

// 切换标签显示
const toggleLabels = () => {
  showLabels.value = !showLabels.value
}

// 切换动画
const toggleAnimation = () => {
  animationEnabled.value = !animationEnabled.value
}

// 设置自动刷新
const setupAutoRefresh = () => {
  // 清除现有计时器
  clearAutoRefresh()
  
  if (autoRefreshEnabled.value) {
    refreshTimer = setInterval(() => {
      emit('refresh-data')
    }, autoRefreshInterval.value)
  }
}

// 清除自动刷新
const clearAutoRefresh = () => {
  if (refreshTimer) {
    clearInterval(refreshTimer)
    refreshTimer = null
  }
}

// 组件挂载时设置
onMounted(() => {
  setupAutoRefresh()
})

// 组件卸载时清理
onUnmounted(() => {
  clearAutoRefresh()
})
</script>

<style scoped>
.data-visualization {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

h4 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #333;
}

.chart-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 20px;
  align-items: center;
}

.control-btn {
  padding: 8px 12px;
  background-color: #2196F3;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.control-btn:hover {
  background-color: #1976D2;
}

.chart-type-switcher,
.chart-colors,
.auto-refresh {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chart-type-switcher label,
.chart-colors label,
.auto-refresh label {
  font-size: 14px;
  font-weight: 500;
}

.chart-type-switcher select,
.auto-refresh select {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: white;
}

.color-picker {
  width: 40px;
  height: 32px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}

.simple-chart-container {
  width: 100%;
  height: 300px;
  background-color: white;
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 15px;
  box-sizing: border-box;
  overflow: hidden;
}

.chart-content {
  width: 100%;
  height: 100%;
  position: relative;
}

/* 深色模式下的样式 */
:global(.dark-mode) .data-visualization {
  background-color: #2d2d2d;
}

:global(.dark-mode) h4 {
  color: #fff;
}

:global(.dark-mode) .simple-chart-container {
  background-color: #444;
  border-color: #666;
}

:global(.dark-mode) .chart-type-switcher select,
:global(.dark-mode) .auto-refresh select {
  background-color: #555;
  border-color: #666;
  color: #fff;
}
</style>